<template>
  <view class="h_body">
    <view class="h_card collection">
      <view class="collection_left">代收金额</view>
      <view class="collection_right">
        <view class="inputs"> <nut-input v-model="sendGoodsStore.collectionMoney" type="number" placeholder="请输入代收金额" @update:model-value='serveFeeCount' /></view>
        <view class="text">元</view>
      </view>
    </view>
    <view class="h_card collection">
      <view class="collection_left">服务费</view>
      <view class="collection_right">
        <view class="inputs"> <nut-input readonly v-model="sendGoodsStore.serveFee" type="number" placeholder="请输入代收金额"/></view>
        <view class="text">元</view>
      </view>
    </view>
    <view class="h_card collection_row">
      <view class="one">
        <view class="left">返还周期</view>
        <nut-radio-group v-model="sendGoodsStore.returnCycle" direction="horizontal">
          <nut-radio label="1">即日退</nut-radio>
          <nut-radio label="2">三日退</nut-radio>
          <nut-radio label="3">月结</nut-radio>
        </nut-radio-group>
      </view>
      <view class="one ones " @click="openRetenTypePop">
        <view class="left">返还方式</view>
        <text>{{sendGoodsStore.returnType == '2' && !sendGoodsStore.returunAccount?'请选择货款返还方式':returnChoose()}}</text>
      </view>
    </view>
    <view class="big_box">
      <view class="chilren_box">
        <p class="hh">收费标准：</p>
        <p>1个工作日返回：3000元以下(含)，收费30元/票；3000元~20000元以下(含)，按代收货款金额3‰收费，20000元以上，收费200元/票。</p>
        <p>3个工作日返回：2000元以下(含)，收费5元/票；2000元~10000元以下(含)，按代收货款金额3‰收费，10000元以上，收费30元/票。</p>
        <p class="hh dd">其他说明：</p>
        <p>1.费用预估仅供参考，具体以开单收取为准。</p>
        <p>2.具体的收费信息可咨询当地营业部或952999。</p>
        <p>3.代收货款实行转账支付。</p>
      </view>
    </view>
    <view class="keep_money_foot">
      <view class="left">
        <view class="one">服务费</view>
        <view class="tow">¥{{sendGoodsStore.serveFee}}</view>
      </view>
      <view class="right" @click="getKeepMoneyInfo" :class="{insureMoney_active:blueSure()}">确 定</view>
    </view>
  </view>
  <!-- 返还方式选择弹窗 -->
  <nut-popup :style="{ height: '50%' }" position="bottom" :closeable="true" round v-model:visible="collectionPop">
    <view class="sendTypePop">
      <view class="title">承运类型</view>
      <view class="contant">
        <view class="row">
          <view class="block" :class="{actives:sendGoodsStore.returnType == '1'}" @click="chooseType('1')">会员卡</view>
          <view class="blocks" :class="{actives:sendGoodsStore.returnType == '2'}" @click="chooseType('2')">银行卡</view>
          <view class="block" :class="{actives:sendGoodsStore.returnType == '3'}" @click="chooseType('3')">微信</view>
        </view>
        <view class="row">
          <view class="block" :class="{actives:sendGoodsStore.returnType == '4'}" @click="chooseType('4')">现金</view>
          <view class="block" :class="{actives:sendGoodsStore.returnType == '5'}" @click="chooseType('5')">支付宝</view>
        </view>
        <view class="type_div" v-if="sendGoodsStore.returnType == '2'">
          <view class="type_div_div" @click="gotoBank">
            <view class="left">银行账户</view>
            <text>{{sendGoodsStore.returunAccount?sendGoodsStore.returunAccount:'请选择银行账户' }}</text>
          </view>
        </view>
        <view class="type_div" v-if="sendGoodsStore.returnType == '1' || sendGoodsStore.returnType == '3'">
          <view class="type_div_div" @click="gotoBank">
            <view class="left">手机号</view>
            <text>{{userStore.userInfo.phone}}</text>
          </view>
        </view>
      </view>

      <view class="foot">
        <view class="button" @click="returnTypeSure" :class="{insureMoney_active:(sendGoodsStore.returnType == '2' && sendGoodsStore.returunAccount) || sendGoodsStore.returnType !='2' }">确 定</view>
      </view>
    </view>

  </nut-popup>
</template>
<script lang="ts" setup>
import Taro from "@tarojs/taro";
import { ref } from "vue";
import useSendGoodsStore from "../../store/sendGoods";
import useUserInfoStore from "../../store/user";
const sendGoodsStore = useSendGoodsStore();
const collectionPop = ref<boolean>(false);
const userStore = useUserInfoStore();
function getKeepMoneyInfo() {
  if(!(sendGoodsStore.collectionPayment != '0' && sendGoodsStore.collectionPayment)){
    return
  }
  if(sendGoodsStore.returnType == '2' && !sendGoodsStore.returunAccount){
    return
  }
  Taro.navigateBack()
}
function blueSure(){
  if(!(sendGoodsStore.collectionPayment != '0' && sendGoodsStore.collectionPayment)){
    return false
  }
  if(sendGoodsStore.returnType == '2' && !sendGoodsStore.returunAccount){
    return false
  }
  return true
}
function returnChoose() {
  console.log(sendGoodsStore.returnType,'1111111111111111111');

  if (sendGoodsStore.returnType == "1") {
    return '会员卡返还'
  } else if (sendGoodsStore.returnType == "2") {
    return '银行卡返还'
  }else if (sendGoodsStore.returnType == "3") {
    return '微信返还'
  }else{
    return '现金返还'
  }
}
function returnTypeSure() {
  if (
    !(
      (sendGoodsStore.returnType == "2" && sendGoodsStore.returunAccount) ||
      sendGoodsStore.returnType != "2"
    )
  ) {
    return;
  }
  collectionPop.value = false;
}
function openRetenTypePop() {
  collectionPop.value = true;
}
function chooseType(index: string) {
  if (index != "2") {
    sendGoodsStore.returunAccount == null;
  }
  sendGoodsStore.returnType = index;
}
function serveFeeCount() {
  if (
    sendGoodsStore.collectionPayment == "" ||
    sendGoodsStore.collectionPayment == "0"
  ) {
    sendGoodsStore.serveFee = "0";
    return;
  }
  let cost = Number(sendGoodsStore.collectionPayment);
  if (sendGoodsStore.returnCycle == "1") {
    if (cost <= 3000) {
      sendGoodsStore.serveFee = "30";
    } else if (cost > 3000 && cost <= 20000) {
      sendGoodsStore.serveFee = String(((cost * 3) / 1000).toFixed(2));
    } else if (cost > 20000) {
      sendGoodsStore.serveFee = "200";
    }
  } else if (sendGoodsStore.returnCycle == "2") {
    if (cost <= 2000) {
      sendGoodsStore.serveFee = "5";
    } else if (cost > 2000 && cost <= 10000) {
      sendGoodsStore.serveFee = String(((cost * 3) / 1000).toFixed(2));
    } else if (cost > 10000) {
      sendGoodsStore.serveFee = "30";
    }
  } else {
    sendGoodsStore.serveFee = "0";
  }
}
//去银行卡
function gotoBank() {
  Taro.navigateTo({
    url: "/pages/sendGoods/bankList",
  });
}
</script>
<style lang="scss">
.type_div_div:before {
  position: absolute;
  top: 0;
  right: 60rpx;
  bottom: 0;
  display: block;
  margin: auto;
  width: 60rpx;
  height: 60rpx;
  color: #8799a3;
  content: "\e6a3";
  text-align: center;
  font-size: 68rpx;
  line-height: 60rpx;
}
.actives {
  border: 1px solid #0966ff !important;
  background: rgba(9, 102, 255, 0.05) !important;
  color: #0966ff !important;
}
.keep_money_foot {
  width: 100%;
  height: 128rpx;
  // background-color: red;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  box-sizing: border-box;
  justify-content: space-between;
  background-color: white;
  .left {
    display: flex;
    .one {
      font-family: PingFang SC Medium;
      font-size: 28rpx;
      color: #252525;
      font-weight: 700;
      margin-right: 16rpx;
    }
    .tow {
      font-family: PingFang SC Medium;
      font-size: 28rpx;
      color: #0966ff;
    }
  }
  .right {
    width: 460rpx;
    height: 88rpx;
    border-radius: 200rpx;
    background: #999999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFang SC Medium;
    font-size: 32rpx;
    color: #ffffff;
  }
}
.sendTypePop {
  .foot {
    width: 100%;
    height: 128rpx;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    background: white;
    .button {
      width: 702rpx;
      height: 88rpx;
      border-radius: 200rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #999999;
      font-family: PingFang SC Medium;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
  .title {
    height: 112rpx;
    display: flex;
    align-items: center;
    margin-left: 24rpx;
    font-family: PingFangSC-Semibold;
    font-size: 32rpx;
    color: #252525;
    font-weight: 700;
  }
  .contant {
    height: calc(100% - 112rpx);
    width: 100%;
    overflow: auto;
    .row {
      width: 100%;
      height: 72rpx;
      padding: 0 24rpx;
      box-sizing: border-box;
      display: flex;
      margin-bottom: 24rpx;
      .block {
        width: 218rpx;
        height: 71px;
        border-radius: 88rpx;
        border: 1rpx solid rgba(0, 0, 0, 0.06);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .blocks {
        width: 218rpx;
        height: 71px;
        border-radius: 88rpx;
        border: 1rpx solid rgba(0, 0, 0, 0.06);
        margin: 0 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .type_div {
      width: 100%;
      height: 88rpx;
      padding: 0 24rpx;
      box-sizing: border-box;
      .type_div_div {
        padding: 0 24rpx;
        box-sizing: border-box;
        width: 702rpx;
        border-radius: 8rpx;
        background: #f5f5f5;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: PingFang SC;
        font-size: 28rpx;
        color: #666666;
        text {
          margin-right: 60rpx;
        }
      }
    }
  }
}

.insureMoney_active {
  /* 主蓝 */
  background: #0966ff !important;
}
.collection {
  height: 104rpx;
  margin-top: 24rpx;
  padding: 0 24rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .collection_left {
    font-family: PingFang SC Medium;
    font-size: 28rpx;
    color: #666666;
  }
  .collection_right {
    display: flex;
    align-items: center;
    .inputs {
      width: 450rpx;
      height: 72rpx;
      border-radius: 8rpx;
      background: #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      .nut-input--border {
        border: unset;
      }
      .nut-input {
        background-color: unset;
        padding: 0;
      }
      .nut-input-value {
        display: flex;
        align-items: center;
      }
    }
    .text {
      font-family: PingFang SC Medium;
      font-size: 28rpx;
      color: #252525;
    }
  }
}
.collection_row {
  margin-top: 24rpx;
  height: 208rpx;
  .one {
    width: 100%;
    height: 103rpx;
    border-bottom: 1rpx solid #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      font-family: PingFang SC Medium;
      font-size: 28rpx;
      color: #666666;
      margin-left: 24rpx;
    }
  }
  .ones {
    height: 104rpx;
    border: unset;
    position: relative;
    text {
      font-family: PingFang SC;
      font-size: 28rpx;
      color: #999999;
      margin-right: 60rpx;
    }
  }
}
.ones:before {
  position: absolute;
  top: 0;
  right: 30px;
  bottom: 0;
  display: block;
  margin: auto;
  width: 30px;
  height: 30px;
  color: #8799a3;
  content: "\e6a3";
  text-align: center;
  font-size: 34px;
  font-family: cuIcon;
  line-height: 30px;
}

.big_box {
  width: 100%;
  height: 332rpx;
  padding: 0 24rpx;
  box-sizing: border-box;
  margin-top: 24rpx;
  .chilren_box {
    padding: 24rpx;
    box-sizing: border-box;
    width: 700rpx;
    height: 330rpx;
    border-radius: 8px;
    opacity: 1;

    background: #e5efff;

    border: 1rpx solid #b2d0ff;
    p {
      font-family: PingFang SC;
      font-size: 20rpx;
      color: #666666;
    }
    .hh {
      font-family: PingFang SC Medium;
      font-size: 24rpx;
      color: #666666;
    }
    .dd {
      margin-top: 24rpx;
    }
  }
}
</style>
